<template>
	<div class="home">
		<div class="header">
			<!-- 地址_地图 -->
			<!-- 添加点击事件：跳转到address组件 -->
			<!-- 命名的路由:https://router.vuejs.org/zh/guide/essentials/navigation.html -->
			<!-- router.push({ name: 'user', params: { userId }}) // -> /user/123 -->
			<!-- name看router.js中的name，这里了大写 -->
			<div class="address_map" @click="$router.push({ name: 'Address',params: {city: city}})">
				<!-- bootstrap文字图标 -->
				<i class="fa fa-map-marker"></i>
				<span>{{address}}</span>
        <i class="fa fa-sort-desc"></i>
			</div>
			<!-- 搜索商家 -->
			<div class="shop_search">
				<!-- bootstrap文字图标 -->
				<i class="fa fa-search"></i>
				搜索商家 商家名称
			</div>
		</div> 
	</div>
</template>

<script>
export default {
	name:"Home",
	// 使用计算属性，不需要频繁调用
	computed: {
		address () {
			// 从vuex的getters获取地址address
			return this.$store.getters.address
		},
		// 获取city
		city () {
			// city在vuex中
			return this.$store.getters.location.addressComponent.city || this.$store.getters.location.addressComponent.province
		}
	}
}
</script>

<style scoped>
.home {
	/* 设置宽高百分百，可滚动（有滚动条），border-box */
	width: 100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}
.header {
	/* 背景色（蓝）+内边距（字体在中间） */
	background: #009eef;
	padding: 16px;
}
.header .address_map {
	/* 字体颜色（版）+字体粗 */
	color: #fff;
	font-weight: bold;
}
.header .address_map i {
	/* 左右外边距，字体图标大小 */
	margin: 0 3px;
	font-size: 18px;
}
.header .address_map span {
	/* 块级内联元素，不用换号，宽度为80%（header有内边距，(100%-16px*2)）*80% = 占用的宽度) */
	display: inline-block;
	width: 80%;
	/* 字数过长，多余的部分用...表示 */
	overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.header .shop_search {
	/* 上边距（和上一行分隔）+背景色（白）+内边距（文字居中）+圆角+文字水平居中+字体颜色（灰色） */
	margin-top: 10px;
	background-color: #fff;
	padding: 10px 0;
	border-radius: 4px;
	text-align: center;
	color: #aaa;
}
</style>